<template>
    <el-row class="application-mine-create">
        <el-col>
            <div class="tree-title">历史版本</div>
            <el-table
                v-loading="loading"
                :data="tableList"
                :max-height="mapHeight"
                border
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="变更人" prop="userName" show-overflow-tooltip></el-table-column>
                <el-table-column label="变更人所属组" prop="groupNames" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.groupNames || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="变更时间" prop="updateTime" show-overflow-tooltip></el-table-column>
                <el-table-column label="变更内容" prop="infoUpdateContent" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.infoUpdateContent || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.remark || '-'}}
                    </template>
                </el-table-column>
                <el-table-column label="版本号" prop="apiVersion" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ scope.row.apiVersionOut || scope.row.apiVersion || '-'}}
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination
                v-show="totalNum > 0"
                :total="totalNum"
                :page.sync="ruleForm.pageNum"
                :limit.sync="ruleForm.pageSize"
                @pagination="fetchData"
            ></pagination> -->
        </el-col>
    </el-row>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import { getApiHistory } from "@/api/dataService/pool";

export default {
    name: "DocDetailManageVersion",
    props: {
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        docId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
            },
            tableList: [],
            totalNum: 0,
            mapHeight: undefined
        };
    },
    computed: {
        mergerRuleForm() {
            return Object.assign({}, this.ruleForm, this.form)
        }
    },
    created() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = 320; // getHeight(true) - 240;
    },
    methods: {
        fetchData() {
            let parmas = {
                pageNum: this.mergerRuleForm.pageNum,
                pageSize: this.mergerRuleForm.pageSize,
            }
            getApiHistory(this.docId, parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        onEdit(row) {
            if (row && row.id) {
                this.$router.push(`/service/application/mine/edit/${row.id}`)
            }
        },
        onCreate() {
            this.$router.push('/service/application/mine/add')
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.tree-title {
    height: 30px;
    line-height: 30px;
}
</style>